Interactive Snippets 小元件設計(指南)
Interactive snippets 它們能顯示最新資訊,並提供來自你應用的快捷操作選項。
這包括 Spotlight、Siri 和快捷指令(Shortcuts)應用,這種整合能拓展你的應用在系統中的覆蓋面和實用性。
/image.png)
Interactive snippets 總是清晰地出現在螢幕頂部,覆蓋在其他內容之上。不會打斷使用者正在做的事,也能提供有用的資訊。要點確認、取消或滑掉它,它才會消失。非常適合用於展示應用中的簡單、日常任務和資訊。
Appearance 外觀設計
Larger type 較大字號
為了快速、即時的體驗,因此內容必須易讀易懂。文字比系統預設字號更大,較大的文字可以即時吸引使用者注意力,讓他們快速獲取關鍵資訊。確保元素之間有足夠間距,以避免佈局混亂。
Consistent margins 統一邊距
在佈局片段內容時,保持周邊邊距一致,可以讓整體更清晰易讀,這樣可以讓片段結構清晰,幫助使用者集中注意力在重點資訊上。你可以使用 ContainerRelativeShape API 來確保這些邊距具備響應性,在不同平臺和螢幕尺寸上自動適配。
Concise content 精簡內容
字變大了,能放的內容自然就少了。避免內容高度超過 340 點(points),否則會需要滾動,影響使用流暢性。相反,應保持內容簡潔,僅保留最重要的資訊。真要看更多內容,可以點進去你 app 裡的相應頁面。
Clear contrast 清晰對比
用你自己的 app 風格的背景時。注意文字與背景的對比度,尤其是在遠距離檢視時。若對比不足,可提升前景內容的對比度增強可讀性。
Interaction 互動
互動功能讓片段具備狀態感(stateful)和可操作性(actionable)可以放按鈕,讓使用者一上來就能點操作,簡單又直接。
/image 1.png)
還可以顯示更新後的資料,反映你應用中的最新資訊。舉個例子,比如有個追蹤喝水的小工具。透過新增一個“新增水量”的按鈕,讓資訊更具可操作性,同時保持體驗輕量。資料更新時,採用縮放和模糊效果作為反饋,這種方式為操作提供了明確的視覺反饋。直接更新資料來確認操作成功,使用者會更信任你的 app。
還可以同時包含多個按鈕和更新的資料內容。比如音訊均衡器片段可以顯示當前設定,也能讓使用者馬上切換幾個音效模式。
操作要簡單明瞭,而且要跟主要功能相關。即使沒有互動功能,也可以透過動畫展示你應用中的最新資訊。
/image 2.png)
Types 型別
一種是展示結果的,一種是讓你做決定的。
結果片段(results)
用於展示已確認操作的結果,或那些不需要進一步操作的資訊。不需要後續操作或決策,底部通常只會有一個“完成”(Done)按鈕。很適合用於檢視訂單狀態這類場景。
/image 3.png)
確認片段(confirmations)
當 Intent 需要使用者先執行某個操作後才能返回結果時,應使用確認片段。
舉個例子,一個咖啡下單的 Intent。雖然有按鈕可以調整濃縮咖啡的份量,但因為必須使用者操作後才能下單,所以屬於確認片段。按鈕上的動詞(如“下單”)清晰地傳達接下來的動作是什麼。
/image 4.png)
一旦確認訂單(例如兩份濃縮的拿鐵),接著的結果就會展示這個選擇的結果。這種模式幫助使用者明確地感知自己從啟動 Intent 到完成任務的整個過程。
/image 5.png)
系統有些標準動詞你可以選,也可以自己寫個更合適的。
/image 6.png)
When to show dialog 什麼時候使用對話內容
對話,是 Siri 為 App Intent 所朗讀的語音內容,對話內容對於以語音為主的互動至關重要。例如,使用者戴著 AirPods 沒看螢幕,也可以透過 Siri 朗讀的內容獲取結果或進行確認回應。
/image 7.png)
片段本身應當能清晰表達 Intent 的目的,而無需依賴語音內容,這樣可以減少冗餘資訊,讓片段更直觀易懂。
/image 8.png)
使用確認片段請求使用者操作,使用結果片段展示操作結果。